<template>

<view class="user-container">
	<view class="title">
			<view>我的</view>
		</view>
		<scroll-view class="pet-scroll" scroll-x>
			<view class="pet-list">
				<view v-for="(pet, idx) in pets" :key="pet.id" class="pet-avatar" :class="{ selected: selectedPet === idx }"
					@click="selectPet(idx)">
					<image class="pet-img" v-if="pet.img" :src="pet.img" mode="aspectFill" />
					<view class="pet-img u-f-ajc" style="color: #999;font-size: 19rpx;" v-else @click="addPet">点击录入</view>
					<view class="pet-name">{{ pet.name }}</view>
					<view v-if="selectedPet === pet.id" class="pet-check">
					</view>
				</view>
				<!-- <view>
					<view class="pet-avatar add" @click="addPet">
					<view class="add-icon">+</view>
				</view>
				</view> -->
			</view>
		</scroll-view>
		<view class="today u-f-ajsb" v-if="type != 'one'" style="margin-top: 50rpx;width: 686rpx;"> 
			<text style="color: #999;margin-left: 40rpx;" >今日数据估算</text>
			<text style="font-weight: bold;font-size: 50rpx;">轻微不足！！</text>
		</view>
		<view class="one" v-if="type == 'one'">
			<view class="one-left">
				<view class="one-num-row">
					<text class="one-num">500</text>
					<text class="one-unit">ML</text>
				</view>
				<view class="one-label">今日饮水量</view>
				<view class="one-num-row" style="margin-top: 48rpx;">
					<text class="one-num">3</text>
					<text class="one-unit">次</text>
				</view>
				<view class="one-label">饮水次数</view>
			</view>
			<view class="one-right">
				<view class="one-eval">非常好！</view>
				<view class="one-num-row" style="margin-top: 80rpx;">
					<text class="one-num">30</text>
					<text class="one-unit">min</text>
				</view>
				<view class="one-label">饮水时长</view>
			</view>
		</view>
		<view class="more">
			<view class="more-card">
				<view class="more-label">饮水量约</view>
				<view class="more-row">
					<text class="more-num">500</text>
					<text class="more-unit">ML</text>
				</view>
			</view>
			<view class="more-card">
				<view class="more-label">饮水次数约</view>
				<view class="more-row">
					<text class="more-num">3</text>
					<text class="more-unit">次</text>
				</view>
			</view>
		</view>
		<view class="charts">
			<view class="charts-tabs">
				<view v-for="(tab, idx) in tabs" :key="tab" :class="['charts-tab', {active: tabActive === idx}]" @click="tabActive = idx">{{tab}}</view>
			</view>
		<view class="u-f-ajc" v-if="type!='one'">
			<view class="charts-legend">
				<view class="legend-item" v-for="(item, idx) in legend" :key="item.text">
					<view class="legend-dot" :style="{background: item.color}"></view>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
			<qiun-data-charts
				type="column"
				:opts="opts"
				:chartData="chartData"
				canvasId="drinkChart"
				:ontouch="true"
				style="width: 100%; height: 360rpx;"
			/>
		</view>
		<view class="empty" v-if=" !isShow">
			<image class="empty-img" src="/static/image/empty.png" mode="widthFix" />
			<view class="empty-tip">开启数据统计，即可查看详细数据～</view>
			<view class="empty-btn">开启数据统计</view>
		</view>
	<tn-tabbar v-model="currentIndex" @change="changeTabbar" height="120" bgColor="#000"  inactiveColor="#fff" activeColor="#fff" :list="tabbarList"></tn-tabbar>

</view>
</template>
<script>
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
export default {
	data() {
		return {
			type:'one',
			pets: [
				{ id: 1, name: '小咪', },
				{ id: 2, name: '小咪', img: '/static/image/cat2.jpg' },
				{ id: 3, name: '小咪', img: '/static/image/cat2.jpg' },
				{ id: 4, name: '小咪', img: '/static/image/cat2.jpg' },



			],
			tabbarList: [{
            title: '首页',
            activeIcon: '/static/image/tabbar/homea.png',
            inactiveIcon: '/static/image/tabbar/home.png'
          },
          {
            title: '数据',
           activeIcon: '/static/image/tabbar/dataa.png',
            inactiveIcon: '/static/image/tabbar/data.png'
          },
     
          {
            title: '摄影',
            activeIcon: '/static/image/tabbar/shexianga.png',
            inactiveIcon: '/static/image/tabbar/shexiang.png'
          },
          {
            title: '我的',
          activeIcon: '/static/image/tabbar/mya.png',
            inactiveIcon: '/static/image/tabbar/my.png'
          }
        ],
			currentIndex: 1,
			selectedPet: 0,
			isShow:true,
			tabs: ['日', '周', '月', '6个月'],
			tabActive: 1,
			legend: [
				{ text: '早晨', color: '#a9e2ff' },
				{ text: '中午', color: '#31b0ff' },
				{ text: '晚上', color: '#3191ff' }
			],
			chartData: {
				categories: ['11.09', '11.10', '11.11', '11.12', '11.13', '11.14', '11.15'],
				series: [
					{
						name: '早晨',
						data: [350, 210, 210, 300, 400, 350, 300]
					},
					{
						name: '中午',
						data: [210, 180, 120, 200, 300, 200, 180]
					},
					{
						name: '晚上',
						data: [210, 120, 100, 180, 200, 180, 160]
					}
				]
			},
			opts: {
				color: ['#a9e2ff', '#4db6ff', '#3191ff'],
				legend: { show: false },
				xAxis: {
					disableGrid: true,
					fontColor: '#bbb',
					fontSize: 12,
					disableLine: true
				},
				yAxis: {
					gridType: 'dash',
					dashLength: 4,
					fontColor: '#bbb',
					fontSize: 12,
					min: 0,
					max: 1000,
					splitNumber: 5,
					format: val => val,
					disableGrid: true,
					disableLine: true
				},
				extra: {
					column: {
						type: 'stack',
						width: 12,
						activeBgOpacity: 0.08,
						linearType: 'custom',
						barBorderCircle: true,
						barBorderRadius: [10, 10, 10, 10]
					}
				},
				dataLabel: false,
				animation: true,
				duration: 500,
				tooltip: { showBox: true, bgColor: '#444', bgOpacity: 0.9, borderRadius: 12, fontColor: '#fff' }
			}
		}
	},
	methods: {
		selectPet(index) {
			this.selectedPet = index;
		 },
		addPet() {
			uni.setStorageSync('addPet', true)
			uni.navigateTo({
				url: '/pages/register/add'
			})
		},
		changeTabbar(index) {
			if(index == 0) {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			} else if(index == 1) {
				uni.redirectTo({
					url: '/pages/data/index'
				})
			}else if(index == 2) {
				uni.redirectTo({
					url: '/pages/video/index'
				})
			}
			else if(index == 3) {
				uni.redirectTo({
					url: '/pages/user/index'
				})
			}
		},
	}
}
</script>
<style>
.title {
	font-size: 46rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 0rpx;
  margin-top: 32rpx;
	color: #111;
	margin-top: 60px;
}
.user-container {
	min-height: 100vh;
	background: #fff;
	padding: 0;
}

.pet-scroll {
	margin-top: 40px;
	width: 100vw;
	overflow-x: scroll;
	white-space: nowrap;
	padding: 0 0 0 0;
}

.pet-list {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 24rpx 0 32rpx 24rpx;
	gap: 24rpx;
}

.pet-avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 45rpx;
	position: relative;
	flex-shrink: 0;
	transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}

.pet-avatar.add {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: #f5f5f5;
	align-items: center;
	justify-content: center;
	display: flex;
}

.add-icon {
	font-size: 44rpx;
	color: #bbb;
}

.pet-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	object-fit: cover;
	background: #eee;
}

.pet-name {
	font-size: 29rpx;
	color: #333;
	margin-top: 8rpx;
}

.pet-avatar.selected {
	transform: scale(1.18);
	z-index: 2;
}

.pet-avatar.selected .pet-img {
	border: 3rpx solid #1ecb8c;
}

.pet-avatar.selected .pet-check {
	position: absolute;
	right: 0;
	bottom: 38rpx;
	background: #1ecb8c;
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 24rpx;
	border: 2rpx solid #fff;
}

.menu-list {
	margin-top: 32rpx;
}

.menu-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 24rpx;
	border-bottom: 1rpx solid #f2f2f2;
	font-size: 30rpx;
	color: #111;
}

.menu-arrow {
	font-size: 32rpx;
	color: #bbb;
}

.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 80rpx;
}
.empty-img {
	width: 220rpx;
	height: 250rpx;
	margin-bottom: 36rpx;
}
.empty-tip {
	color: #999;
	font-size: 26rpx;
	margin-bottom: 48rpx;
}
.empty-btn {
	width: 450rpx;
	height: 84rpx;
	background: #000;
	color: #fff;
	border-radius: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	font-weight: 500;
}
.one {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	margin: 40rpx 0 0 0;
	padding: 0 40rpx;
}
.one-left, .one-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.one-right {
	align-items: flex-end;
}
.one-num-row {
	display: flex;
	align-items: baseline;
}
.one-num {
	font-size: 68rpx;
	font-weight: bold;
	color: #111;
}
.one-unit {
	font-size: 28rpx;
	color: #999;
	margin-left: 8rpx;
}
.one-label {
	font-size: 26rpx;
	color: #999;
	margin-top: 6rpx;
}
.one-eval {
	font-size: 48rpx;
	font-weight: bold;
	color: #111;
	margin-bottom: 10rpx;
}
.charts {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.charts-tabs {
	display: flex;
	width: 686rpx;
	border-radius: 18rpx;
	margin-left: 32rpx;
	margin-top: 70rpx;
	background: #f5f5f5;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 48rpx;
	
}
.charts-tab {
	font-size: 26rpx;
	color: #bbb;
	background: #f5f5f5;
	border-radius: 18rpx;
	padding: 8rpx 0rpx;
	width: 100%;
	text-align: center;
}
.charts-tab.active {
	background: #111;
	color: #fff;
}
.charts-legend {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
	margin-left: 20rpx;
}
.legend-item {
	display: flex;
	align-items: center;
	margin-right: 32rpx;
	font-size: 22rpx;
	color: #bbb;
}
.legend-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	margin-right: 8rpx;
}
.more {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 40rpx 0 0 0;
	padding: 0 40rpx;
}
.more-card {
	background: #fcfcfc;
	border-radius: 48rpx;
	box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.04);
	width: 46%;
	padding: 32rpx 0 32rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.more-label {
	color: #999;
	font-size: 28rpx;
	margin-bottom: 12rpx;
}
.more-row {
	display: flex;
	align-items: baseline;
}
.more-num {
	font-size: 68rpx;
	font-weight: bold;
	color: #111;
}
.more-unit {
	font-size: 28rpx;
	color: #999;
	margin-left: 8rpx;
}
</style>